<template>
    <div>
        <div id="bread">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/manage/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>职位列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="positionList">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="省份">
                                <span>{{ props.row.province.provName }}</span>
                            </el-form-item>
                            <el-form-item label="城市">
                                <span>{{ props.row.city.cityName }}</span>
                            </el-form-item>
                            <el-form-item label="行政区">
                                <span>{{ props.row.district.districtName }}</span>
                            </el-form-item>
                            <el-form-item label="薪资范围">
                                <span>{{ props.row.salaryInfo }}</span>
                            </el-form-item>
                            <el-form-item label="职位描述" style="width: 100%;">
                                <p v-html="props.row.introduction"></p>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="序号"
                        >
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="职位名称"
                        prop="positionName"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        label="公司名称"
                        prop="company.name"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        label="行业类型"
                        prop="positionTypeSecond.positionType.typeName"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        label="职位类型"
                        prop="positionTypeSecond.typeName">
                </el-table-column>
                <el-table-column
                        label="职位性质"
                        >
                    <template slot-scope="scope">
                        <span v-if="scope.row.fullTimeOn">全职</span>
                        <span v-else>兼职</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="学历要求"
                        prop="education.educationName">
                </el-table-column>
                <el-table-column
                        label="工作经验"
                        prop="workExperienceType.workExperienceInfo">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200"
                        >
                    <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-check" circle size="mini" title="通过" @click="passThePostion(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini" title="不通过" @click="delThePosition(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.total"
                    @current-change="handlePageChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "positionList",
        data(){
            return{
                tableData:[],
                pageInfo:{},
                pageNum:1
            }
        },
        methods:{
            getAllAuditPositions(){
                this.$axios.get("manage/getAllAuditPositions",{params:{pageNum:this.pageNum}}).then(response=>{
                    this.tableData = response.data.positions.list;
                    this.pageInfo=response.data.positions;
                });
            },
            handlePageChange(pageNum){
                this.pageNum=pageNum;
                this.getAllAuditPositions();
            },
            passThePostion(row){
                this.$axios.get("manage/passThePosition",{params:{id:row.id}}).then(response=>{
                    this.getAllAuditPositions();
                });
            },
            delThePosition(row)
            {
                if (confirm("确认要删除这条职位吗")) {
                    this.$axios.get("manage/deleteThePosition", {params: {id: row.id}}).then(response => {
                        this.getAllAuditPositions();
                    });
                }
            }


        },
        created() {
            this.getAllAuditPositions();
        }
    }
</script>

<style scoped>
    #bread{
        margin-top: 30px;
        margin-left: 30px;
    }
    .positionList{
        margin-left: 30px;
        margin-top: 20px;
    }
    .demo-table-expand {
        font-size: 0;
        margin-left: 30px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>